<template>
    <div>

      <div>
        <el-button @click="jizhongs()">集中式</el-button>
        <el-button @click="fensans()">分布式</el-button>
      </div>

      <div>

        <el-form :inline="true" :model="queryForm" class="demo-form-inline">

          <el-form-item label="省">
            <el-select v-model="queryForm.province" @change="getshiid()" clearable placeholder="请选择省">
              <el-option
                v-for="item in shengoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="市">
            <el-select v-model="queryForm.city" @change="getxianid()" clearable placeholder="请选择市">
              <el-option
                v-for="item in shioptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区">
            <el-select v-model="queryForm.county" clearable placeholder="请选择区">
              <el-option
                v-for="item in xianoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-input v-model="queryForm.name" placeholder="搜索: 小区名 , 公寓名 , 房间名 , 租客名"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>

        </el-form>

      </div>

      <div>
        <el-button @click="suoyou()">全部</el-button>
        <el-button>租房分期</el-button>
        <el-button>租房保理</el-button>
        <el-button>空闲可租</el-button>
        <el-button>欠费提醒</el-button>
        <el-button>收费提醒</el-button>
        <el-button>合同快到期</el-button>
        <el-button>合同已到期</el-button>
        <el-button>装修维护</el-button>
      </div>

      <!--   分散式   -->
      <div v-show="fensan" style="width: 100%;height: 100%;">
                <el-table
                  :data="tableDatafensan"
                  style="width: 100%">
                  <el-table-column
                    prop="name"
                    label="房源名字">
                  </el-table-column>
                  <el-table-column
                    prop="building"
                    label="楼栋号">
                  </el-table-column>
                  <el-table-column
                    prop="unit"
                    label="单元号">
                  </el-table-column>
                  <el-table-column
                    prop="roomno"
                    label="门牌号">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="地址">
                  </el-table-column>
                  <el-table-column
                    :formatter="s1"
                    prop="status"
                    label="房屋租聘状态">
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button size="mini" @click="handleEdit(scope.row)">详情</el-button>
                    </template>
                  </el-table-column>
              </el-table>
      </div>

      <!--   集中式   -->
      <div v-show="jizhong" style="width: 100%;height: 100%;">
          <el-table
            :data="tableDatajizhong"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="房源名字">
            </el-table-column>
            <el-table-column
              prop="building"
              label="楼栋号">
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单元号">
            </el-table-column>
            <el-table-column
              prop="roomno"
              label="门牌号">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址">
            </el-table-column>
            <el-table-column
              :formatter="s1"
              prop="status"
              label="房屋租聘状态">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
      </div>

      <div v-show="zong">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="房源名字">
            </el-table-column>
            <el-table-column
              prop="building"
              label="楼栋号">
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单元号">
            </el-table-column>
            <el-table-column
              prop="roomno"
              label="门牌号">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址">
            </el-table-column>
            <el-table-column
              :formatter="s1"
              prop="status"
              label="房屋租聘状态">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
      </div>





      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="60%">
                       <span>
                          <el-form :model="queryForm"  ref="queryForm" label-width="100px" class="demo-ruleForm">

                                  <el-form-item label="楼栋号">
                                    <el-input :value="tableData.building"></el-input>
                                  </el-form-item>
                                  <el-form-item label="单元号">
                                    <el-input :value="tableData.unit"></el-input>
                                  </el-form-item>
                                  <el-form-item label="单元号">
                                    <el-input :value="tableData.roomno"></el-input>
                                  </el-form-item>
                                   <el-form-item label="房产面积平方单位">
                                    <el-input :value="tableData.proportion"></el-input>
                                  </el-form-item>
                                      <el-form-item label="付款方式">
                                    <el-input :value="tableData.numberone"></el-input>
                                        <el-input :value="tableData.numbertwo"></el-input>
                                  </el-form-item>
                                <el-form-item label="房屋状态">
                                      <el-input :value="tableData.resource"></el-input>
                                  </el-form-item>

                          </el-form>
                       </span>
                          <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                        </span>
      </el-dialog>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryForm.pageNo"
        :limit.sync="queryForm.pageSize"
        @pagination="getList"
      />
    </div>
</template>

<script>
import {listfangtai,listfangfensan,listfangjizhong,getsheng,getshi,getxian} from "@/api/system/fangyuan";
export default {

  name: "index",
  data() {
    return {
      //省
      shengoptions:[],
      shioptions:[],
      xianoptions:[],
      queryForm: {
        pageNo:1,
        pageSize:10
      },
      tableDatajizhong: [],
      tableDatafensan: [],
      jizhong: false,
      fensan: false,
      zong:true,
      tableData: [],
      total:0,
      dialogVisible: false,
    }
  },
  methods: {
    handleEdit(data){
      this.dialogVisible=true;
      this.tableData=data;
    },
    s1(row){
      console.log(row.status);
      if (row.status==1){
        return this.tableData.status="整租";
      }else {
        return this.tableData.status="分租";
      }
    },
    //查询方法
    onSubmit() {
      console.log('submit!');
      this.getList();
    },
    //所有房源
    suoyou(){
      this.zong=true;
      this.jizhong=false;
      this.fensan=false;
    },
    //集中式房源
    jizhongs(){
      this.jizhong=true;
      this.fensan=false;
      this.zong=false;
    },
    //分散式房源
    fensans(){
      this.jizhong=false;
      this.fensan=true;
      this.zong=false;
    },
    //分页大小PageSize改变事件
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.queryForm.pageSize = pageSize;
      //根据分页和查询条件 ajax请求后台列表数据 给tabledata给分页组件的变量赋值
      this.getList();
    },
    handleCurrentChange(pageNo) {
      console.log(pageNo)
      this.queryForm.pageNo = pageNo;
      //根据分页和查询条件ajax请求后台列表数据 给tabledata 给分页组件的变量赋值
      this.getList();
    },
    onQuery(){
      this.getList();
    },
    getList() {
      listfangtai(this.queryForm).then(response => {
        console.log(response)
        this.tableData = response.data.list;
        this.total = response.data.total;
      });
    },
    getListjizhong(){
      listfangjizhong(this.queryForm).then(response => {
        console.log(response)
        this.tableDatajizhong = response.data.list;
        this.total = response.data.total;
      });
    },
    getListfensan(){
      listfangfensan(this.queryForm).then(response => {
        console.log(response)
        this.tableDatafensan = response.data.list;
        this.total = response.data.total;
      });
    },
    getsheng(){
      getsheng().then(response => {
        this.shengoptions=response;
      });
    },
    getshiid(){
      getshi(this.queryForm).then(response=>{
        this.shioptions=response;
      })
    },
    getxianid() {
      getxian(this.queryForm).then(response => {
        this.xianoptions = response;
      })
    }
  },
  created() {
    this.getList();
    this.getListjizhong();
    this.getListfensan();
    this.getsheng();
  }
}
</script>

<style scoped>

</style>
